<template>
    <div>
        <!-- <router-view> -->
        <el-menu active-text-color="#ffd04b" background-color="#22252C" class="el-menu-vertical-demo" default-active="2" 
            text-color="#fff" @open="handleOpen" @close="handleClose" router>
            <el-sub-menu :index="pathNow.path" :key="pathNow.path" v-if="pathNow.children" >
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{ pathNow.name }}</span>
                </template>

                <el-menu-item @click="" v-for="(item, index) in secondG" :key="index" :index="item.path">
                    {{
                        item.name
                    }}
                </el-menu-item>

            </el-sub-menu>
        </el-menu>
        <!-- </router-view> -->
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { nextTick, ref, reactive, watch, inject } from 'vue'

const route = useRoute()

// 当前一级路由
// let pathNow = reactive(route.matched[1])
const pathNow: any = ref({})
// console.log(route.matched[1]);
// 当前二级路由
// console.log(route.matched[1].children);
// let secondG = route.matched[1].children

const secondG: any = ref({})

const routesChildren = () => {
    pathNow.value = route.matched[1]
    secondG.value = route.matched[1].children
}
// routesChildren()
watch(
    route,
    () => {
        routesChildren()
    },
    {
        immediate: true,
        deep: true,
        flush: "post"
    }
)

const handleOpen = () => {

}
const handleClose = () => {

}


</script>

<style scoped lang="scss">
.el-menu {
    background-color: #22252C;
    border-bottom: none;
    .el-sub-menu{
    background-color: #22252C;

    }
}
</style>